/*eslint-disable*/
export default {
  data() {
    return {
      dataList: [],
      //总页数
      total: 0,
      //当前页数
      currentPage: 1,

      // 输入框的内容
      input5: '',

      // 分配角色对话框数据
      assignRolesDialoge: false,
      assignRolesForm: {
        username: '测试',
        // 角色id
        rid: '',
        // 用户id
        id: ''
      },
      formLabelWidth: '120px',
      // 角色列表
      rolesList: [],

      // 添加用户对话是否显示
      addUsersDialoge: false,

      addUsersForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 表单校验规则
      rules: {
        //prop绑定的字段

        // 用户名
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 密码： required决定是否是必填项(带*)
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],

        // 邮箱
        email: [
          // 格式不正确会 触发
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ],

        // 手机
        mobile: [
          // 格式不正确会 触发
          {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: '手机格式不正确',
            trigger: 'blur'
          }
        ]
      },

      // 编辑用户对话框的显示
      editUsersDialoge: false,

      // 编辑用户表单信息
      editUsersForm: {
        email: '',
        username: '',
        mobile: '',
        id: ''
      }
    }
  },
  //在钩子函数created中触发
  created() {
    // 已进入页面,获取url路径下的页码,刷新页面保留,使用$route来获取
    let curPage = this.$route.params.page
    this.getList(curPage)
    this.loadRolesList()
  },
  methods: {
    //发送axios,封装成一个函数
    async getList(currentPage = 1, query = '') {
      //es5设置默认值的方法
      // currentPage = currentPage || 1;
      // console.log(localStorage.getItem("token"));

      // const url = 'http://localhost:8888/api/private/v1/users'
      const opts = {
        params: {
          query,
          pagenum: currentPage, //当前页码
          pagesize: 2 //每页显示的条数
        }
      }

      // 此处的res相当于.then里面的res,回调成功的结果
      let res = await this.$axios.get('users', opts)
      // console.log(res)

      this.dataList = res.data.data.users

      //总个数按照返回数据中的总条数进行赋值，是固定的
      this.total = res.data.data.total

      //当前页
      this.currentPage = res.data.data.pagenum
      // .then(res => {
      //   // console.log(res);
      //   //获取到的数据渲染到页面中
      //   this.dataList = res.data.data.users;

      //   //总个数按照返回数据中的总条数进行赋值，是固定的
      //   this.total = res.data.data.total;

      //   //当前页
      //   this.currentPage = res.data.data.pagenum;
      // });
    },
    // 点击进行下一页的渲染
    setPagination(e) {
      //e就是点击的那一页
      //点击时渲染下一页的内容,如果当前页面没有输入关键字，则query的值是空的，正常渲染
      // 如果点击时，输入框内是有值的，就输入框的关键字进行渲染
      // 点击时，将点击的页码传给地址栏,通过编程式导航进行设置
      this.$router.push('/users/' + e)
      this.getList(e, this.input5)
    },

    // 点击搜索按钮,按关键字进行搜索,axios中的query参数就是输入的关键字
    searhList() {
      this.getList(1, this.input5)
    },

    // 点击修改状态
    async changeState(row) {
      // console.log(row)
      const { id, mg_state: mgState } = row

      let res = await this.$axios.put(`users/${id}/state/${mgState}`)
      console.log(res)

      if (res.data.meta.status === 200) {
        //发送成功
        // 提示更新状态成功
        this.$message({
          message: '更新状态成功',
          type: 'success',
          duration: 800
        })

        // 重新渲染页面
      }
    },

    // 点击删除当前用户
    async delUsers(id) {
      let res = await this.$axios.delete(`users/${id}`)
      // console.log(res)
      if (res.data.meta.status === 200) {
        // 删除成功,弹出提示框
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 800
        })
      }
    },

    // 点击分配角色
    async showAssignDialoge(row) {
      // console.log(row)
      const { username, id } = row
      // 用户名
      this.assignRolesForm.username = username
      // 用户id
      this.assignRolesForm.id = id

      // 角色id,发送请求时需要的rid,但是row里面是没有的
      // 接口：1.3.4 根据用户id获取角色id
      let res = await this.$axios.get(`users/${id}`)
      // console.log(res.data.data.rid)

      //通过添加用户界面添加的新用户的rid默认都是-1，这里要进行处理，让其默认显示'请选择角色',让rid为空
      this.assignRolesForm.rid =
        res.data.data.rid === -1 ? '' : res.data.data.rid

      // 点击时显示对话框
      this.assignRolesDialoge = true
    },

    // 获取所有的角色列表
    async loadRolesList() {
      let res = await this.$axios.get('roles')
      // console.log(res)
      this.rolesList = res.data.data
    },

    // 点击显示添加用户对话框
    showAddUsersDialoge() {
      this.addUsersDialoge = true
    },

    // 点击确定添加用户
    confirmToAdd() {
      // 先调用validate方法，再次进行校验(如果不进行这步校验的话,即使前面的校验成功了,也会发送请求)
      this.$refs.addUsersForm.validate(async valide => {
        if (!valide) {
          // 校验不成功,不要发送请求
          return
        }
        // 校验成功,发送请求,让后台添加用户
        let res = await this.$axios.post('users', this.addUsersForm)
        console.log(res)
        // 请求发送成功
        if (res.data.meta.status === 201) {
          // 关闭对话框
          this.addUsersDialoge = false

          // 刷新列表
          this.getList()
        }
      })
    },

    // 点击确定添加用户角色
    async confirmToAddRoles() {
      // 请求需要的id,和rid已经赋值给assignRolesForm,并且是双向绑定
      const { id, rid } = this.assignRolesForm
      let res = await this.$axios.put(`users/${id}/role`, {
        rid
      })
      if (res.data.meta.status === 200) {
        // 关闭对话框
        this.assignRolesDialoge = false
        // 提示
        this.$message({
          message: '设置角色成功',
          type: 'success',
          duration: 800
        })
        // 重新刷新列表
        this.getList(this.currentPage)
      }
    },

    // 编辑用户的对话框,将当前行的信息(存在scope.row中传过来)
    showEditDialoge(row) {
      this.editUsersDialoge = true
      // console.log(row)
      // 将editform里面的值重新赋值
      this.editUsersForm.username = row.username
      this.editUsersForm.mobile = row.mobile
      this.editUsersForm.email = row.email
      this.editUsersForm.id = row.id
    },

    // 点击确认提交编辑过后的用户信息
    async confirmToEdit() {
      const { id, email, mobile } = this.editUsersForm
      let res = await this.$axios.put(`users/${id}`, {
        email,
        mobile
      })
      console.log(res)
      if (res.data.meta.status === 200) {
        // 隐藏对话框
        this.editUsersDialoge = false

        //提示
        this.$message({
          message: '更新成功',
          type: 'success',
          duration: 800
        })

        // 重新刷新当前页
        this.getList(this.currentPage)
      }
    }
  }
}
